import React, {useEffect, useState} from 'react';
import {Button, Checkbox, Input, message, Modal, TreeSelect,Form} from "antd";
import {addPerson, getRoles} from "@/services/people";
import {getSections} from "@/services/section";

const Create = (props) => {
  const {isModalVisible,modalIsShow,actionRef}=props
  const { TreeNode } = TreeSelect;
  const [value, setValue] = useState(undefined);
  const [allRoles,setRoles]=useState([]);
  const [sections,setSections]=useState([]);
  const [form] = Form.useForm();

  useEffect(async ()=>{
    // 获取角色和部门的列表
    let sectionList=await getSections();
    setSections(sectionList.data);
    // 获取角色列表
    let rolelist = await getRoles();
    setRoles(rolelist.data);
  },[])

  const onReset = () => {
    form.resetFields();
  };
  /**
   * 添加用户
   * @param values
   * @returns {Promise<void>}
   */
  const createUser =async (values) => {
    //添加的方法
    const response=await addPerson(values);
    if(response.status === undefined){
      message.success('添加成功');
      //  刷新表格数据
      actionRef.current.reload();
      // 关闭模态框
      modalIsShow(false);
    }
  };
  const onChange = () => {
    setValue(value);
  };


  return (
    /**
     * 用户添加的模态框
     */
    <Modal
      destroyOnClose={true}
      title="添加用户"
      visible={isModalVisible}
      onCancel={()=>{modalIsShow(false)}}
      footer={null}>
      <Form
        labelCol={{ span: 3 }}
        wrapperCol={{ span: 18 }}
        labelAlign={'right'}   name="control-ref" onFinish={values=>createUser(values)}>
        <Form.Item name="username" label="登录名" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item
          name="name"
          label="用户名"
          rules={
            [
              {
                required: true,
                message:'用户名必填'
              }
            ]
          }>
          <Input />
        </Form.Item>
        <Form.Item
          name="email"
          label="邮箱"
          rules={
            [
              {
                required: true ,
                message:'邮箱必填',
              },
              {
                type:'email',
                message:'邮箱不合法',
              }
            ]
          }>
          <Input />
        </Form.Item>
        <Form.Item name="phone"
                   label="手机号"
                   rules={
                     [
                       {
                         required: true,
                         message:'手机号必填',
                       },
                       {
                         pattern:/^1\d{10}$/,
                         message:'手机号不合法',
                       }
                     ]
                   }>
          <Input />
        </Form.Item>
        <Form.Item name="id_card" label="身份证" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={
            [
              {
                required: true ,
                message:'密码必填',
              },
              {
                min: 6 ,
                message:'密码最少6位',
              },

            ]
          }>
          <Input.Password />
        </Form.Item>
        <Form.Item
          name="section"
          label="部门"
          rules={
            [
              {
                required: true,
                message:'部门不能为空',
              }
            ]
          }>
          <TreeSelect
            showSearch
            multiple={true}
            style={{ width: '100%' }}
            value={value}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            placeholder="请选择部门"
            allowClear
            treeDefaultExpandAll
            onChange={onChange}
          >
            {sections.map((item)=>{
              return (
                <TreeNode  key={item.id} value={item.id} title={item.name}>
                  {item.children && item.children.map((items)=>{
                    return (
                      <TreeNode  key={items.id} value={items.id} title={items.name}>
                        {items.children ? items.children.map((itembottom)=>{
                          return (<TreeNode value={itembottom.id} key={itembottom.id} title={itembottom.name} />)
                        }) : ''}

                      </TreeNode>
                    )
                  })}
                </TreeNode>
              )
            })}
          </TreeSelect>
        </Form.Item>

        <Form.Item name="roles" label="角色" rules={[{ required: true }]} >
          <Checkbox.Group>
            {allRoles.map((item)=>{
              return (<Checkbox key={item.id} value={item.id} style={{ lineHeight: '32px' }}>
                {item.cn_name}
              </Checkbox>)
            })}
          </Checkbox.Group>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
          <Button htmlType="button" onClick={onReset}>
            重置
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default Create;
